<template>
  <el-aside width="220px" class="sidebar">
    <div class="logo-area">
      <img src="../assets/logo.jpg">
    </div>
    <el-menu
      :default-active="activeIndex"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      router>
      <el-menu-item index="/">
        <i class="el-icon-s-home"></i>
        <span>首页</span>
      </el-menu-item>
      
      <!-- 所有用户都可以访问的课程浏览 -->
      <el-menu-item index="/dashboard/purchase">
        <i class="el-icon-shopping-cart-2"></i>
        <span>课程购买</span>
      </el-menu-item>
      
      <!-- 登录用户才能访问的功能 -->
      <template v-if="isLoggedIn">
        <el-menu-item index="/dashboard/orders">
          <i class="el-icon-s-order"></i>
          <span>订单管理</span>
        </el-menu-item>
        <el-menu-item index="/dashboard/profile">
          <i class="el-icon-user"></i>
          <span>个人中心</span>
        </el-menu-item>
      </template>
      
      <!-- 已登录用户显示退出登录按钮 -->
      <el-menu-item v-if="isLoggedIn" @click="handleLogout">
        <i class="el-icon-switch-button"></i>
        <span>退出登录</span>
      </el-menu-item>
    </el-menu>
  </el-aside>
</template>

<script>
export default {
  name: 'Sidebar',
  computed: {
    activeIndex() {
      // 处理动态路由的情况
      const path = this.$route.path
      if (path.startsWith('/dashboard/orders')) {
        return '/dashboard/orders'
      }
      if (path.startsWith('/dashboard/payment')) {
        return '/dashboard/orders'
      }
      if (path.startsWith('/dashboard/purchase')) {
        return '/dashboard/purchase'
      }
      if (path.startsWith('/dashboard/profile')) {
        return '/dashboard/profile'
      }
      return path
    },
    isLoggedIn() {
      return !!localStorage.getItem('user')
    }
  },
  methods: {
    handleLogout() {
      this.$confirm('确定要退出登录吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        localStorage.removeItem('user')
        this.$message.success('已退出登录')
        this.$router.push('/')
      }).catch(() => {
        this.$message.info('已取消退出')
      })
    }
  }
}
</script>

<style scoped>
.sidebar {
  background-color: #545c64;
  height: 100vh;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.logo-area {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background-color: #434a50;
  padding: 20px 0px;
}

.el-menu {
  border-right: none;
  flex: 1;
  overflow: auto;
}

/* 退出登录按钮样式 */
.el-menu-item:last-child {
  margin-top: auto;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

img{
  width: 25%;
  height: 100%;
}
</style> 